<template>
	<view class="wrap">
		<u-image width="100%" height="150rpx" src="@/static/icon.png"></u-image>
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}"  label-position="top" label="邮箱账户" prop="email" label-width="150">
				<u-input :border="true" placeholder="邮箱账号" v-model="model.email" ></u-input>
			</u-form-item>
			<u-form-item label-position="top" label="密码" prop="password">
				<u-input :password-icon="true" :border="true" type="password" v-model="model.password" placeholder="请输入密码"></u-input>
			</u-form-item>
			<!-- <u-form-item label-position="top" label="确认密码" label-width="150" prop="rePassword">
				<u-input :border="true" type="password" v-model="model.rePassword" placeholder="请确认密码"></u-input>
			</u-form-item> -->
		</u-form>
			<view class="alternative">
				<view class="password" @click="rest">忘记密码</view>
				<view class="issue">遇到问题</view>
			</view>
		<u-button @click="submit" size="default" type="primary" :ripple="true">提交</u-button>
	</view>
</template>

<script>
	import md5Libs from "uview-ui/libs/function/md5";
export default {
	data() {
		return {
			model: {
				email: '',
				password: '',
				rePassword: '',

			},

			rules: {
				email: [
					{
						required: true,
						message: '请输入邮箱',
						trigger: ['change','blur'],
					},
					// {
					// 	validator: (rule, value, callback) => {
					// 		// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
					// 		return this.$u.test.email(value);
					// 	},
					// 	message: '邮箱格式不正确',
					// 	// 触发器可以同时用blur和change，二者之间用英文逗号隔开
					// 	trigger: ['change','blur'],
					// }
				],
			
				password: [
					{
						required: true,
						message: '请输入密码',
						trigger: ['change','blur'],
					},
					{
						// 正则不能含有两边的引号
						pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
						message: '需同时含有字母和数字，长度在6-12之间',
						trigger: ['change','blur'],
					}
				],
				rePassword: [
					{
						required: true,
						message: '请重新输入密码',
						trigger: ['change','blur'],
					},
					{
						validator: (rule, value, callback) => {
							return value === this.model.password;
						},
						message: '两次输入的密码不相等',
						trigger: ['change','blur'],
					}
				],
			},
			border: false,
			errorType: ['message'],
		};
	},
	onLoad() {
	// this.login();
		
		this.checkToken();//校验登录状态
	},
	computed: {
		borderCurrent() {
			return this.border ? 0 : 1;
		}
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		rest(){
			uni.showModal({
				showCancel: false,
				content: '请联系管理员重置密码'
			})
		},
		login() {
			 let title = ''

			uni.showLoading({
				title: '加载中...'
			})
		    const params = {
				username: this.model.email,
				password: this.model.password,
				needPermission: false
			}
			this.request('common/user/login', params).then(res => {
				if(res.code==0){
					uni.setStorageSync('uni_id_token', res.token)
					uni.setStorageSync('uni_id_token_expired', res.tokenExpired)
					uni.setStorageSync('uid', res.uid)
					uni.setStorageSync('username', res.username)
					this.request('common/user/isAdminByUser', {}).then(res => {
							uni.setStorageSync('ifAdmin', res.data.ifAdmin); 
							this.gotoNext()
					})
				}else{
					uni.showModal({
						showCancel: false,
						content: res.msg
					})
				}
				uni.hideLoading()
			}).catch().finally(() => {
				uni.hideLoading()
			})
		},
		//根据权限判断登录后跳进下一页面的方法
		gotoNext(){
			if(uni.getStorageSync('ifAdmin')){
				this.vuex_tabbar[0] = {
					"pagePath": "/pages/emp/empList",
					"iconPath": "/static/otList.png",
					"selectedIconPath": "/static/otList_select.png",
					"text": "员工管理"
				}
				//管理员跳到员工管理页面
				uni.switchTab({
					url:'../emp/empList',
					fail(e) {
						console.log(e);
					}
				})
			}else{
				this.vuex_tabbar[0] = {
					"pagePath": "/pages/overtime/otList",
					"iconPath": "/static/otList.png",
					"selectedIconPath": "/static/otList_select.png",
					"text": "加班调休统计"
				}
				uni.switchTab({
					url:'../overtime/otList',
					fail(e) {
						console.log(e);
					}
				})
			}
		},
		checkToken(){
			this.request('common/user/checkToken', {}).then(res => {
				if(res.code==0){
					this.gotoNext()
				}else{
					// uni.showModal({
					// 	showCancel: false,
					// 	content: res.msg
					// })
				}
			}).catch().finally(() => {
				uni.hideLoading()
			})

		},
		submit() {
			let that = this
			this.$refs.uForm.validate(valid => {
				if (valid) {
					this.login();

					console.log('验证通过');
				} else {
					console.log('验证失败');
				}
			});
		},


	}
};
</script>

<style scoped lang="scss">
.wrap {
	padding: 30rpx;
}
.alternative {
			color: $u-tips-color;
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			margin-bottom: 30rpx;
		}
.agreement {
	display: flex;
	align-items: center;
	margin: 40rpx 0;

	.agreement-text {
		padding-left: 8rpx;
		color: $u-tips-color;
	}
}
</style>
